<template>
  <view class="user-container">
    <!-- 用户列表 -->
    <view class="section-title">
      <text>用户列表</text>
      <button class="add-user-btn" @click="addUser">添加用户</button>
    </view>
    
    <view class="user-list">
      <view 
        class="user-item card" 
        v-for="(user, index) in users" 
        :key="index"
      >
        <view class="user-info">
          <view class="user-avatar">
            <text>{{ user.name.charAt(0) }}</text>
          </view>
          <view class="user-details">
            <text class="user-name">{{ user.name }}</text>
            <text class="user-role">{{ user.role }}</text>
          </view>
        </view>
        
        <view class="user-actions">
          <switch 
            :checked="user.status === '启用'" 
            @change="(e) => toggleUserStatus(index, e)"
          />
          <button class="edit-btn" @click="editUser(index)">编辑</button>
        </view>
      </view>
    </view>
    
    <!-- 权限设置 -->
    <view class="section-title">
      <text>权限设置</text>
    </view>
    
    <view class="permission-section card">
      <view class="permission-item">
        <text>临时密码权限</text>
        <switch checked />
      </view>
      <view class="permission-item">
        <text>远程开锁权限</text>
        <switch checked />
      </view>
      <view class="permission-item">
        <text>用户管理权限</text>
        <switch />
      </view>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const users = ref([
      {
        name: '张三',
        role: '管理员',
        status: '启用'
      },
      {
        name: '李四',
        role: '普通用户',
        status: '启用'
      },
      {
        name: '王五',
        role: '普通用户',
        status: '禁用'
      }
    ])
    
    const addUser = () => {
      uni.showToast({
        title: '添加用户功能待开发',
        icon: 'none'
      })
    }
    
    const editUser = (index) => {
      uni.showToast({
        title: '编辑用户功能待开发',
        icon: 'none'
      })
    }
    
    const toggleUserStatus = (index, e) => {
      users.value[index].status = e.target.value ? '启用' : '禁用'
      uni.showToast({
        title: `${users.value[index].name}已${e.target.value ? '启用' : '禁用'}`,
        icon: 'none'
      })
    }
    
    return {
      users,
      addUser,
      editUser,
      toggleUserStatus
    }
  }
}
</script>

<style scoped>
.user-container {
  padding: 20rpx;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx 0 20rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.add-user-btn {
  background-color: #1296db;
  color: white;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
}

.user-list {
  margin-bottom: 30rpx;
}

.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #1296db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  margin-right: 20rpx;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: bold;
  margin-bottom: 5rpx;
}

.user-role {
  color: #999;
  font-size: 24rpx;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.edit-btn {
  background-color: #5bc0de;
  color: white;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
}

.permission-section {
  margin-bottom: 30rpx;
}

.permission-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.permission-item:last-child {
  border-bottom: none;
}
</style>
